


How to Mimic Author's Notes and Kudos/Comment Buttons

by La_Temperanza



Series: AO3 Work Skins/Tutorials [14]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: Completed
Published: 2017-05-20
Updated: 2017-05-20
Packaged: 2018-11-01 20:20:46
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 729
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/10929336
Author URL: https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza
Summary: Anonymous ontumblr:do you have a skin that would mimic the author’s notes and review/kudos buttons section from the end of a fic? the desired effect being that the fic could go on after the “end” of the fic, so after the author’s notes and review/kudos buttonsHere's a tutorial/live example to do just that, with some of the buttons actually functioning. I'll explain more inside!





	How to Mimic Author's Notes and Kudos/Comment Buttons

And then she learned that fanfiction could solve all her problems. Or at least allow her to forget them for a little bit.

### Notes:

Thanks so much for reading!!

[]() []() []() [](http://archiveofourown.org/comments/show_comments?work_id=10929336)

 

 

 

 

 

 

 

You're still here? It's over. Go home.

* * *

# HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "[Create Work Skin](http://archiveofourown.org/skins/new?skin_type=WorkSkin)". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to put the following:
    
    
    #workskin .anh {
      border: none;
      padding: 0em 3em;
    }
    
    #workskin .anh:after {
      content: ' ';
      display: block;
      border-top: 1px solid #2a2a2a;
      border-bottom: none;
    }
    
    #workskin .fakenotes {
      padding: 0em 4.5em;
      margin-top: 0px;
    }
    
    #workskin .bline {
      text-align: right;
    }
    
    #workskin a.button {
      border-radius: 4px;
      border: 1px solid #BBBBBB;
      margin: 4px 2px;
      background: linear-gradient(#FFFFFF, #dbdbdb);
      box-shadow: inset 0px -1px #c9c9c9;
      color: #2a2a2a;
      padding: 2px;
      display: inline-block;
    }
    
    #workskin a.button:hover {
      color: #990000;
      box-shadow: inset 2px 2px 2px #c9c9c9;
    }
    
    #workskin .topb:before {
      content: "↑ Top";
      padding: 8px 10px;
      font-size: .95em;
    }
    
    #workskin .kudosb:before {
      content: "Kudos ♥";
      padding: 8px 10px;
      font-size: .95em;
    }
    
    #workskin .collectionb:before {
      content: "Add to Collections";
      padding: 8px 10px;
      font-size: .95em;
    }
    
    #workskin .bookmarkb:before {
      content: "Bookmark";
      padding: 8px 10px;
      font-size: .95em;
    }
    
    #workskin .commentsb:before {
      content: "Comments (2)";
      padding: 8px 10px;
      font-size: .95em;
    }
    

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the notes and buttons. Now to implement it.

Go to your the work where you want to use the skin , and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and first add the author's notes--if you want them--with the following code: 
    
    
    <h3 class="anh">Notes:</h3><p class="fakenotes">Fake Author's note here.</p>

Which gives us the following:

### Notes:

Fake Author's note here.

Next is the buttons, which are added with the following coding:
    
    
    <p class="bline">
        <a href="#main" class="button"><span class="topb"></span></a>
    <a href="" class="button"><span class="kudosb"></span></a>
    <a href="" class="button"><span class="collectionb"></span></a>
    <a href="" class="button"><span class="bookmarkb"></span></a>
    <a href="http://archiveofourown.org/comments/show_comments?work_id=YOUR_WORK_ID_HERE" class="button"><span class="commentsb"></span></a>
    </p>

Which gives us the following:

[]() []() []() [](http://archiveofourown.org/comments/show_comments?work_id=YOUR_WORK_ID_HERE)

# NOTES

\- You might've noticed that the text in the buttons is actually put in the work skin and not the text. I did this because if creator's style is turned off, I didn't think people would want to see random text at the end of the fic with no explanation.  
  
\- Yes, this means the comment button doesn't show an accurate comment count. You can always change in your skin to reflect the actual count every time it changes, but personally that seems a little extreme, haha!  
  
\- "↑ Top" functions as the actual button and "Comments" will link to your comments as long as you change the part where it says "YOUR_WORK_ID_HERE" to your work's ID. The "Kudos", "Add to Collections" and "Bookmark" buttons don't work (just because the coding involved with the actual system), but like the others, they have the same rollover effect when the cursor hovers over them.  
  
\- Also, the line of buttons aren't as far to the right of the screen as the real ones, only because when I tried to push them further a scrolling window was formed instead. I don't think it's too bad of a difference myself, but I wanted to address it before anyone else mentioned it.  
  
\- Finally, if any of your readers are using a [site skin](http://archiveofourown.org/skins?skin_type=Site), their actual kudos/comments buttons will look different than the ones here, breaking the illusion. Sorry, I tried to figure out a way to work around this, but at this time I'm stumped and wouldn't mind any suggestions.  
  
\- As always, if you have any questions or concerns, feel free to leave a comment here or send me an ask at [to-skin-a-fic.tumblr.com](http://to-skin-a-fic.tumblr.com/)


End file.
